<%@ page language="java" contentType="text/html; charset=utf-8"   pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="${ctxPath }/js/lib/jquery-1.12.4.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
		<link rel="stylesheet" media="all" href="${ctxPath }/js/system/mergely/codemirror.css" />
		<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/search/searchcursor.min.js"></script>
		<script src="${ctxPath }/js/system/mergely/mergely.js" type="text/javascript"></script>
		<link rel="stylesheet" media="all" href="${ctxPath }/js/system/mergely/mergely.css" />
		<style type="text/css">
		body{ background-color: #1A1A1A; color: #fff }
		a{ color: #fff;text-decoration: none;}
		img{vertical-align:middle;margin-top:-3px;}
		.drop_zone {
			border: 2px dashed #BBBBBB;
			border-radius: 5px 5px 5px 5px;
			color: #BBBBBB;
			padding: 10px 25px;
			text-align: center;
			align: center;
			width: 80%;
		}
		#path-lhs,#path-rhs{ font-size: 40px; font-family: Arial; color:#C9C9C9}
		#path-rhs{ padding-left:20px}
		#compare-editor-lhs{ background-color: #212121; }
		#compare-editor-lhs .CodeMirror-linenumbers{ background-color: #212121; }
		#compare-editor-rhs{ background-color: #002035 }
		#compare-editor-rhs .CodeMirror-linenumbers{ background-color: #002035; }
		#compare-lhs-margin,#compare-rhs-margin{ display:none}		
		.CodeMirror - scroll {background - color: #1d1f20;}
		#merge-lhs-4{ font-family: "宋体"; }
		.save-link {color: #285cab;font-size:12px; padding:3px 6px 4px; margin:0 10px 0 30px; display:inline-block; border: 1px solid #fff; background:#fff; border-radius: 3px;  }
		.clear-link {color: #2f2f2f;font-size:12px; padding:3px 6px 4px; margin:0 10px 0 0; display:inline-block; border: 1px solid #fff; background:#fff; border-radius: 3px;   }
		.dmsm{ font-family: "微软雅黑"; font-size: 12px; padding: 0 5px; }
		#compare .CodeMirror-lines pre{transition: all 1s ease 0s;}
		#compare .CodeMirror-lines pre:hover{ background-color:#FDFFC6; color:#000000}
        td, th {border: 0px ;}
    	.wbbt { text-align:center; border-bottom: 1px solid #333333; line-height:40px}
    	.txtbjdel {color:#C9C9C9;font-size:15px;cursor: pointer;}
    	.CodeMirror pre {padding: 5px 10px 5px !important;}
		.CodeMirror-linenumber { padding: 4px 3px 0 4px !important;}
		.CodeMirror-lines { padding: 0px 0;}
		</style>
	</head>
	<body>
        
		<table  style="width: 100%; margin: 15px 0 10px;"><tr>
			<td style="width: 50%;background-color: #1a1a1a;color: #bd6969; overflow: hidden;">
				<a id="save-lhs" class="save-link" href="#" title="保存下面文本框的内容到本地"><img src="${ctxPath }/images/icon/baocun.png" title="保存" />&nbsp;保存</a>
				<a class="clear-link" data-side="lhs" href="#" title="清空下面文本框的内容"><img src="${ctxPath }/images/icon/qing.png" title="清空"/>&nbsp;清空</a>
				<span class="dmsm">(在下面输入您的代码或文本，或直接把文件拖入到框中)</span>
			</td>
			<td style="width: 50%;background-color: #1a1a1a;color: #8bcaf3; overflow: hidden;">
				<a id="save-rhs" class="save-link" href="#" title="保存下面文本框的内容到本地"><img src="${ctxPath }/images/icon/baocun.png" title="保存" />&nbsp;保存</a>
				<a class="clear-link" data-side="rhs" href="#" title="清空下面文本框的内容"><img src="${ctxPath }/images/icon/qing.png" />&nbsp;清空</a>
				<span class="dmsm">(在下面输入您的代码或文本，或直接把文件拖入到框中)</span>
			</td>
		</tr></table>
		<div style="height: 450px; width: 100%;">
		  	<div class="mergely-resizer">
		    	<div id="compare"></div>
		  	</div>
		</div>

		<script>
		$(document).ready(function () {
			// 不赋值
			//$('#compare').mergely();
			// 同步赋值
			$('#compare').mergely({
				fgcolor:'#fff',
		        lhs: function(setValue) { // Left-hand Side左边值
		            setValue('the quick red fox\njumped over the hairy dog');
		        },
		        rhs: function(setValue) { // Right-hand Side右边值
		            setValue('the quick brown fox\njumped over the lazy dog');
		        }
		    });
			// 异步设置值
			// get async lhsResponse, then set lhs value
		    //$('#compare').mergely('lhs', 'kevin');
			// 清除左边内容
		    //$('#compare').mergely('clear', 'lhs');
			// 获取内容
		    //alert($('#compare').mergely('get', 'rhs'));
			// 差异内容
			//alert($('#compare').mergely('diff'))
			// 清空
			$(".clear-link").click(function(){
				var $this = $(this);
				$('#compare').mergely('clear', $this.data("side"));
			});
			// 保存
			function download_content(a, side) {
				//a.innerHTML = "preparing content..";
				var txt = $('#compare').mergely('get', side);
				var datauri = "data:plain/text;charset=UTF-8," + encodeURIComponent(txt);
				a.setAttribute('download', side+".txt");
				a.setAttribute('href', datauri);
				//a.innerHTML = "content ready.";
			}
			$('#save-lhs').on('mouseover', function() { download_content(this, "lhs"); });
			$('#save-rhs').on('mouseover', function() { download_content(this, "rhs"); });
		});
		</script>
	</body>
</html>
